<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>留言板</title>
	<script src="js/jquery-1.11.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"> </script>
	<script src="js/jquery.scrollUp.min.js"></script>
	<script src="js/jquery.color.js"></script>
	
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="css/labs.css">
 
	<style type="text/css">
		body {
			background: url("images/bg.gif")  repeat;
		}
		#main {
			background-color: #FFFFFF;
		}
		.st-txt {
			width: 30%;
			min-width: 150px;
		}
		#scrollUp {
		    background-image: url("images/top.png");
		    bottom: 20px;
		    right: 20px;
		    width: 38px;    
		    height: 38px;   
		}
		blockquote{
		}
		.page-header{
			margin-top: 0;
		}
		.nav-pills {
			float: right;
		}
		.nav-pills a{
			color:#428bca;
		}
		#loginModal .modal-dialog {
			width:300px;
		}
		.admin-btn{
			float: right;
			display:none;
		}
		#msg .label{
		    font-size: 14px;
		}
		#reply{
			margin:-20px auto 8px 20px;
			display:none;
		}
		#re{
			margin-left:20px;
			margin-bottom: 20px;
		}
	</style>
	<script>
	$(function() {
		//返回顶部 start
        $.scrollUp({
            animation: 'fade',
            activeOverlay: '#00FFFF',
            scrollImg: {
                active: true,
                type: 'background',
                src: 'images/top.png'
            }
        });
		$('.image-switch').addClass('active');
		
		//实例化UE编辑器
		var ue = UE.getEditor('editor');
		
		var status = 0;
		function check_status(){
			if (status!=0){
			}
		}
		//文档就绪时异步调用查询所有留言并添加至页面
		$.post("msgLogic.php", {'method' : 'query'}, function(data){
			if(data!=0){
				$.each(data,function(n,m){
					
					var em = $("<blockquote><input type='hidden' value='" + 
						m.id + "'><span class='label label-primary'>" +
						m.title + "</span><small><b>" +
						m.name + "</b> <cite> 发表于 " +
						m.create_time + "</cite></small>" + 
						m.content + "</blockquote>");
						if((m.reply)){
							var bl = "<blockquote><small><b>管理员 </b> <cite> 回复于 "+
										m.reply.create_time+"</cite></small><p>"+
										m.reply.content+"</p></blockquote>";
							em.append(bl);
						}
					if(status==1){
					    em = setbtn(em);
					    //给回复删除按钮添加hover显示和隐藏
					    em.hover(
					      function(){
					          $(this).children('.admin-btn').toggle(); 
					      },
					      function(){
                              $(this).children('.admin-btn').toggle(); 
                          }
					    );
					}
					$('#msg').append(em);
					
				});
				//给回复按钮添加click事件，显示回复框
				$(".admin-btn .rep").on('click', function(){
					var msg_id = $(this).parent().next().val();
					var bt;
					if(($('#reply').next('button')).length > 0){
						bt = $('#reply').next('button')
					}else{
						bt = "<button id='re' class='btn btn-default btn-sm '>确认</button>";
					}
					if(($(this).parent().parent().next('#reply')).length > 0){
						$('#reply').slideToggle();
						$(bt).slideToggle();
					}else{
						$('#reply').css("display", "none");
						$(bt).css("display", "none");
						$(this).parent().parent().after($('#reply'));
						var ue = UE.getEditor('reply');
						
						$('#reply').after(bt);
						$('#reply').slideToggle();
						$(bt).slideToggle();
					}
					
					//点击确认提交回复
					$('#re').on('click', function(){
						var admin_id = status;
						var content = ue.getContent();
						// console.log(msg_id+'-'+admin_id+'-'+content);
						$.post("replyLogic.php",{'msg_id':msg_id,'admin_id':admin_id,'content':content,'method':'add'},function(json){
							console.log(json);
							var admin_name = $('#admin_name').val();
							var bl = "<blockquote><small><b>管理员 " +
										admin_name+"</b> <cite> 回复于 "+
										json.create_time+"</cite></small><p>"+
										json.content+"</p></blockquote>";
							$('#reply').prev().append(bl);
							$('#reply').slideUp();
							$('#reply').next('button').slideUp();
							ue.setContent('');
						},'json');
					});
				});
				//删除按钮绑定事件
				$('.rem').on('click', function(){
					$('#deleteModal').modal('show');
					var msg_id = $(this).parent().next().val();
					var msg = $(this).parent().parent();
					$('#go-on').on('click', function(){
						$.post('msgLogic.php',{'id':msg_id,'method':'delete'},function(data){
							console.log(data);
							if(data){
								$(msg).remove();
							}
						});
					});
				});
			 }
		},'json');
		//点击“发表”按钮，异步提交表单，成功则返回数据库新插入的记录并添加至页面
		$("#smt").on("click", function(e){
			var name = $('#name').val();
			var title = $('#title').val();
			var content = ue.getContent();
			var j = {'name' : name, 'title' : title, 'content' : content, 'method' : 'add'};
			$.post("msgLogic.php", j, function(data){
					// alert(data);
				if(data!=0){
					var em = "<blockquote><span class='label label-primary'>" +
						data.title + "</span><small><b>" +
						data.name + "</b> <cite> 发表于 " +
						data.create_time + "</cite></small>" + 
						data.content + "</blockquote>";
					$('#msg').append($(em).fadeIn(600).css({backgroundColor:"#FCF8C5"}));
    				$('body,html').animate({'scrollTop':$(window).scrollTop()+200},2000);
    				setTimeout(function(){
    					$('#msg blockquote:last').animate({backgroundColor:"#ffffff"},1000);
    				},2500);
				}
			},'json');
		});
		
		
		
	    var status = $('#status').val();
	    //添加回复和删除按钮的方法
	    function setbtn(e){
	        var btn = "<span class='admin-btn'><button class='rep btn btn-default btn-sm'>回复</button> " +
                     "<button  class='rem btn btn-default btn-sm'><span class='glyphicon glyphicon-remove'></span></button>"+
                     "</span>";
	        e.prepend(btn);
	        return e;
	    }
		    
		
		//点击登录，弹出登录框
		$('#lg').on("click", function(){
			$('#loginModal').modal('show');
			setTimeout(function() {
				$('#account').focus();
			}, 500);
		});
		//登录框消失时重置表单数据
		$('#loginModal').on('hidden.bs.modal', function (e) {
			$('#frm')[0].reset();
			$('#loginModal .alert').remove();
		})
		
		var flat;
		$('input[name="account"]').blur(function(){
			if($(this).val().length < 1 && $(this).val()==''){
				$('#frm').next().replaceWith("<div class='alert alert-danger'>请填写帐号</div>");
				flat = false;
			} else {
				flat = true;
			}
		});
		$('input[name="password"]').blur(function(){
			if($(this).val().length < 1 && $(this).val()==''){
				$('#frm').next().replaceWith("<div class='alert alert-danger'>请填写密码</div>");
				flat = false;
			} else {
				flat = true;
			}
		});
		
		//异步登录
		$("#login").on('click', function(event) {
			$('#account').blur();
			$('#password').blur();
			var account = $('#account').val();
			var password = $('#password').val();
			var j = {'account' : account, 'password' : password, 'method' : 'login'};
			 	$.post("adminLogic.php",j, function(json){
			 		  // console.log(json);
			 		if(json!=0){
			 			$('#frm').next().replaceWith("<div class='alert alert-success'>登陆成功！</div>");
			 			setTimeout(function() {
					 		$('#loginModal').modal('hide');
					 		history.go(0);
			 			}, 1000);
			 			
			 		} else {
			 			$('#frm').next().replaceWith("<div class='alert alert-danger'>账号或密码错误，请重新尝试</div>");
			 		}
			 	},'json');
			 if(flat) {
			 	//登录成功刷新页面
			 	history.go(0);
			 } else {
			 	return false;
			 }
		});
		
		//异步退出，后台清楚SESSION数据
		$("#lo").on('click', function(event) {
			$.post("adminLogic.php", {'method' : 'logout'}, function(){
				history.go(0);
			});
		});
		
	});
	</script>
</head>

<body>
	<div class="container">
		<div class="row clearfix">
			<div class="col-xs-0 col-sm-1 col-md-2 column"> </div>
			<div id="main" class="col-xs-12 col-sm-10 col-md-8 column ">
				
				<div id="msg">
				  	
				
				<div class="page-header">
					<ul id="nav" class="nav nav-pills" role="tablist">
					<?php
						$status = 0;
						require_once 'Admin.class.php';
						$admin = isset($_SESSION['admin']) ? unserialize($_SESSION['admin']) : null;
						if($admin != null) {
							$status = $admin -> id;
					?>
						<li>
							<a href="javascript:void(0);">欢迎回来, <?php echo $admin->name; ?> !</a>
						</li>
						<li>
							<a id="lo" href="javascript:void(0);">退出</a>
						</li>
						<input type="hidden" id="admin_name"  value="<?php echo $admin->id; ?>" />
					<?php	
						} else {
					?>
						<li>
							<a id="lg" href="javascript:void(0);">管理员登录</a> 
						</li>
					<?php
						}
					?>
					<input type="hidden" id="status" name="status" value="<?php echo $status; ?>" />
					
					</ul>
					<!-- login modal -->
					<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" 
					   aria-labelledby="myModalLabel" aria-hidden="true">
					   <div class="modal-dialog">
					      <div class="modal-content">
					         <div class="modal-header">
					            <button type="button" class="close" data-dismiss="modal" 
					               aria-hidden="true">×
					            </button>
					            <h4 class="modal-title" id="myModalLabel">
					              	管理员登录
					            </h4>
					         </div>
					         <div class="modal-body">
					           	 <form  id="frm" action="add.php" method="post">
									<div class="form-group">
										 <label>帐号</label>
										 <input type="text" class="form-control" name="name" id="account" placeholder="请输入账号" />
										 <span class='s1'> </span>
									</div>
									<div class="form-group">
										 <label>密码</label>
										 <input type="password" class="form-control" name="age" id="password" placeholder="请输入密码"/>
										 <span class='s1'> </span>
									</div>
									
								</form>
								<div ></div>
					         </div>
					         <div class="modal-footer">
					            <button type="button" class="btn btn-primary" id="login">
					            	 登录
					            </button>
					            <button type="button" class="btn btn-default" id="rst" data-dismiss="modal">
					               	取消
					            </button>
					         </div>
					      </div>
					   </div>
					</div>
					<!-- /login modal -->
					<!-- delete modal -->
					<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" 
					   aria-labelledby="myModalLabel" aria-hidden="true">
					   <div class="modal-dialog">
					      <div class="modal-content">
					         <div class="modal-header">
					            <button type="button" class="close" data-dismiss="modal" 
					               aria-hidden="true">×
					            </button>
					            <h4 class="modal-title" id="myModalLabel">
					              	注意！
					            </h4>
					         </div>
					         <div class="modal-body">
					           	 您正在删除一条留言，而且这个操作是不可逆的，是否继续？
					         </div>
					         <div class="modal-footer">
					            <a class="btn btn-default" id="go-on" href="" data-dismiss="modal">
					             	  继续
					            </a>
					            <button type="button" class="btn btn-primary" data-dismiss="modal">
					               	取消
					            </button>
					         </div>
					      </div>
					   </div>
					</div>
					<!-- /delete modal -->
					<h1> 留言板 <small> Message board</small></h1>
				</div>
				</div>
				<hr />
				<form role="form">
					<div class="form-group">
						<label>昵称</label>
						<input type="text" class="st-txt form-control" id="name" placeholder="请输入昵称"/>
					</div>
					<div class="form-group">
						<label>标题</label>
						<input type="text" class="st-txt form-control" id="title" placeholder="请输入标题"/>
					</div>
					<div class="form-group">
						<label>内容</label>
						<script id="editor" type="text/plain" style="width:100%;height:100px;" ></script>
						<!-- <textarea class="form-control" id="content" placeholder="文明上网，理性发言:)" rows="4"></textarea> -->
						
					</div>

					<button id="smt" type="button" class="btn btn-success">
						 发表 
					</button>
				</form>
				<p></p>
				<hr />
				<p class="text-center text-info"><small>Copyright © 2014 - Power by Fini</small></p>
			</div>
			<div class="col-xs-0 col-sm-1 col-md-2 column"></div>
		</div>
	</div>
</body>
<script id="reply" type="text/plain" style="width:90%;height:100px;" >
</script> 
</html>

